<template>
    <div class="guahao">
        
		<!-- 搜索框 -->
		<el-form ref="form" :model="form" label-width="80px"  style="margin-top:-10px">
			<el-form-item label="患者姓名">
			<el-row :gutter="15">
				<el-col :span="4">
				  <el-input v-model="patientName"></el-input>
				</el-col>
				<el-col :span="6">
			 		<el-button type="primary" @click="findAllGuahao">查询</el-button>
			 		<el-button type="success" @click="findAllDepartment">挂号</el-button>
				</el-col>
			</el-row>
			</el-form-item>
		</el-form>
		<div style="height:500px">
			<!-- 挂号表格信息 -->
			<el-table :data="guahaos" border style="width: 100%; margin-top:50px;">
			<el-table-column prop="guaId" label="挂号id"> </el-table-column>
			<el-table-column prop="patientName" label="患者姓名"> </el-table-column>
			<el-table-column prop="depName" label="科室"> </el-table-column>
			<el-table-column prop="doctorName" label="医师"> </el-table-column>
			<el-table-column prop="patientGender" label="性别"> </el-table-column>
			<el-table-column prop="patientAge" label="年龄"> </el-table-column>
			<el-table-column prop="patientIdCard" label="身份证" width="200px"> </el-table-column>
			<el-table-column prop="price" label="价格"> </el-table-column>
			<el-table-column prop="guahaoAddTime" label="挂号时间"> </el-table-column>
			<!-- show-overflow-tooltip="true" -->
			<!-- <el-table-column label="操作">
			<template slot-scope="scope">
				<el-button @click="{showFormVisible = true,handleClick(scope.row)}" type="text" size="small">查看</el-button>
				<el-button @click="{dialogFormVisible = true,handleClick(scope.row)}" type="text" size="small">编辑</el-button>
			</template>
			</el-table-column> -->
			
		</el-table>
		</div>
		
		
		<!-- 编辑：=====对话框内容 -->
		<!-- 新增挂号 -->
		<el-dialog title="挂号" :visible.sync="addFormVisible">
		  <el-form :model="form" >
		    <el-form-item label="姓名" :label-width="formLabelWidth" >
		      <el-input v-model="form.addForm.patientName" autocomplete="off" style="width:300px"></el-input>
		    </el-form-item>

			<el-form-item label="年龄" :label-width="formLabelWidth">
			    <el-select v-model="age" placeholder="请选择年龄" filterable>
			      <el-option v-for="aa in ages" :key="aa" :label="aa" :value="aa"></el-option>
			    </el-select>
			</el-form-item>
			
		    <el-form-item label="性别" :label-width="formLabelWidth" >
		        <el-radio-group v-model="form.addForm.patientGender">
		          <el-radio label="男" v-model="form.addForm.patientGender" value="男"></el-radio>
		          <el-radio label="女" v-model="form.addForm.patientGender" value="女"></el-radio>
		        </el-radio-group>
		    </el-form-item>		   
		    <el-form-item label="身份证" :label-width="formLabelWidth" show-overflow-tooltip="showover">
		      <el-input v-model="form.addForm.patientIdCard" autocomplete="off" style="width:300px"></el-input>
		    </el-form-item>
			<el-form-item label="电话" :label-width="formLabelWidth" >
		      <el-input v-model="form.addForm.patientTel" autocomplete="off" style="width:300px"></el-input>
		    </el-form-item>

			<el-form-item label="科室" :label-width="formLabelWidth">
			    <el-select v-model="depId" placeholder="选科室" @change="findDoctors" filterable>
			      <el-option v-for="pp in departments" :key="pp.depId" :label="pp.depName" :value="pp.depId"></el-option>
			    </el-select>
			</el-form-item>
			<el-form-item label="医生" :label-width="formLabelWidth">
			    <el-select v-model="docId" placeholder="选医生" @change="getPrice" filterable>
			      <el-option v-for="dd in doctors" :key="dd.doctorId" :label="dd.doctorName" :value="dd.doctorId"></el-option>
			    </el-select>
			</el-form-item>
			<el-form-item label="价格" :label-width="formLabelWidth">￥：{{this.form.addForm.price}}
			</el-form-item>
		  </el-form>
		  
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="addFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addGuahao">确定挂号</el-button>
		  </div>
		</el-dialog>
		
		<el-row>
  			<el-col :span="8"><div class="grid-content bg-purple-dark"></div></el-col>
		</el-row>

		<div class="block" :span="8" style="margin-left:500px">
		  <!-- <span class="demonstration">大于 7 页时的效果</span> -->
		  <el-pagination
		    layout="prev, pager, next"
		    :total="pageData.total"
			:page-size="pageData.size"
			:current-page="pageData.current"
			@current-change="handleChange"
			>
		  </el-pagination>
		</div>
    </div>
</template>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

        export default{
            //name:"Student",
            data: function() {
                return {
					guahaos:[{guaId:"",patientName:"",depName:"",doctorName:"",patientGender:"",patientAge:"",patientIdCard:"",price:"",guahaoAddTime:"",status:""}],
					form:{
						addForm:{patientTel:"",guaId:"",patientName:"",patientGender:"",patientAge:"",patientIdCard:"",doctorName:"",doctorId:"",depName:"",depId:"",price:"",guahaoAddTime:""},
					},
					departments:"",
					depId:"",
					doctors:"",
					docId:"",
					ages:"",
					age:[],
					pageData:{
						size:9,
						total:0,
						current:1
					},
					patientName:"",
					addFormVisible:false,
					showover:true,
					formLabelWidth: '80px',
					// rules:{
					// 	name:[
					// 		{ required: true, message: '不能为空', trigger: 'blur' },
            		// 		{ min: 2, max: 15, message: '名字不能超过15个字符', trigger: 'blur' }
					// 	],
					// 	sel: [
            		// 		{ required: true, message: '请选择' }
         			// 	],
					// 	idCard:[
					// 		{required:true,message:'不能为空',trigger:'blur'},
					// 	]

					// }
				}	
			},
			methods:{
				findAllGuahao(){
					console.log(this.name);
					this.$http.get("http://localhost:8088/findAllGuahao",{params:{
						patientName:this.patientName,
						current:this.pageData.current,
						size:this.pageData.size
						}})
					.then(resp=>{
						console.log(resp.data.data);//打印的是result里面的data 即为ipage对象
						console.log("total为"+resp.data.data.total)
						// Object.assign(this.pageData,resp.data.data)
						console.log(this.pageData.current)
						this.pageData.total=resp.data.data.total;
						this.guahaos=resp.data.data.records;
					
                    }).catch(err=>{
                        console.error(err);
                    })
				},
				findDoctors(){
					//alert(this.depId)
					this.$http.get("http://localhost:8088/findDoctors",{params:{depId:this.depId}})
					.then(resp=>{
						console.log(resp.data.data)
						this.doctors=resp.data.data
					}).catch(err=>{
					    console.error(err);
					})
				},
				findAllDepartment(){
					this.addFormVisible = true
					this.$http.get("http://localhost:8088/findAllDepartment",{params:{dep:"1"}})
					.then(resp=>{
						//alert(resp.data.message);
						this.departments=resp.data.data//得到所有的科室名
					}).catch(err=>{
						this.$message.err("系统错误")
					    console.error(err);
					})
				},
				getPrice(){
					this.form.addForm.price=12;
				},
				handleChange(data){
					console.log(data);
					this.pageData.current=data;
					this.findAllGuahao();
					localStorage.removeItem("jwt")
				},
				addGuahao(){
					console.log(this.form.addForm.guaId)
					this.form.addForm.doctorId=this.docId
					this.form.addForm.depId=this.depId
					this.form.addForm.patientAge=this.age
					console.log(this.form.addForm.patientName)
					console.log(this.form.addForm.patientGender)
					console.log(this.form.addForm.patientAge)
					console.log(this.form.addForm.patientIdCard)
					console.log(this.form.addForm.doctorId)
					console.log(this.form.addForm.depId)
					if(
						this.form.addForm.patientName!=null&
						this.form.addForm.patientGender!=null&
						this.form.addForm.patientAge!=null&
						this.form.addForm.patientIdCard!=null&
						this.form.addForm.doctorId!=0&
						this.form.addForm.depId!=0
						){
						this.$http.post("http://localhost:8088/addGuahao",this.form.addForm)
						.then(resp=>{
						console.log(resp.data.data);
						this.addFormVisible = false;//如果都不为空才发送请求
						if(resp.data.success==true){
								this.$message({
						          message: '添加成功',
						          type: 'success'
						        });
								this.addFormVisible=false;
								this.form.addForm={};
								this.departments="";
								this.depId="";
								this.doctors="";
								this.docId="";
								this.ages="";
								this.age=[]
								this.findAllGuahao()
						}else{
							alert(resp.data.message)
						}
						
					}).catch(err=>{
					    console.error(err);
					})
					}else{
						this.addFormVisible=true;
						alert("有空的")
						
					}
				},
				findAges(){
					this.$http.get("http://localhost:8088/getAges")
					.then(resp=>{
						this.ages=resp.data.data;
					})
					.catch(err=>{
						this.$message.err("findAges年龄错误")
					})
			
				}
			},
			mounted() {
				this.findAllGuahao();
				this.findAges();
			}
        };
</script>
